<template>
    <div class="view_tracker">
        <card title="传感器列表">
            <template #actions>
                <el-select class="w-28" v-model="queryTrackerStatus" placeholder="状态" clearable>
                    <el-option v-for="(val, key) in trackerStatus" :key="key" :value="key" :label="val.text" />
                </el-select>
                <el-select class="w-28" v-model="queryBy">
                    <el-option v-for="(val, key) in queryBySomething" :key="key" :value="key" :label="val" />
                </el-select>
                <el-input
                    class="w-48"
                    v-model="queryString"
                    :placeholder="placeholder"
                    prefix-icon="el-icon-search"
                    clearable
                />
                <el-button type="primary" @click="handleDialogOpen">批量入库</el-button>
            </template>
            <template #default>
                <el-table :data="tableData">
                    <el-table-column type="index" label="#" align="center" />
                    <el-table-column prop="vid" label="传感器VID" width="" />
                    <el-table-column prop="address" label="传感器地址" width="384" />
                    <el-table-column prop="capacity" label="电量" />
                    <el-table-column prop="sellerStatus" label="状态">
                        <template #default="{ row: { sellerStatus } }">
                            <el-tag effect="dark" :type="trackerStatus[sellerStatus].tagType">
                                {{ trackerStatus[sellerStatus].text }}
                            </el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="userName" label="操作员" />
                    <el-table-column prop="createTime" label="创建时间" />
                </el-table>
            </template>

            <template #bottom-right>
                <el-pagination
                    @current-change="query"
                    :currentPage.sync="currentPage"
                    :total="total"
                    :pageSize="pageSize"
                />
            </template>
        </card>

        <!-- 批量入库对话框 -->
        <el-dialog
            :visible.sync="visible"
            title="传感器批量入库"
            custom-class="storing_dialog"
            @closed="handleDialogClosed"
        >
            <template #default>
                <el-alert>vid必须是以8开头的15位数字，以英文逗号分隔，或回车换行</el-alert>
                <div class="input_box">
                    <div class="input_box-label">传感器列表</div>
                    <el-input type="textarea" v-model="trackersId" :rows="5" resize="none" />
                </div>
                <!-- <el-form label-position="top">
                    <el-form-item
                        v-for="(item, index) in trackersId"
                        :key="index"
                        :label="`传感器${index ? index + 1 : ''}`"
                    >
                        <el-input class="tracker_id_input" v-model="trackersId[index]" />
                        <el-button
                            class="add_tracker_button"
                            @click="addTracker(index)"
                            :icon="`el-icon-${index ? 'minus' : 'plus'}`"
                            circle
                        />
                    </el-form-item>
                </el-form> -->
            </template>

            <template #footer>
                <el-button type="primary" @click="save">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getQueryOptions } from '../../mixins';

export default {
    data() {
        return {
            tableData: [],
            visible: false,

            // trackersId: [''],
            trackersId: '',

            queryBy: 'vid',
            queryTrackerStatus: '',
        };
    },

    mixins: [
        getQueryOptions({
            apiurl: '/yxl/platform/findTracker',
            paginable: true,
            params: {
                queryString: 'queryBy',
                queryTrackerStatus: 'sellerStatus',
            },
        }),
    ],

    computed: {
        // 按某物查询
        queryBySomething() {
            return {
                vid: '传感器vid',
                address: '传感器地址',
            };
        },

        // 占位符
        placeholder() {
            return `按${this.queryBySomething[this.queryBy]}查询`;
        },

        // >>>>> 追踪器状态常量
        trackerStatus() {
            return {
                1: { text: '库存' },
                2: { text: '已出库', tagType: 'success' },
                3: { text: '监控中', tagType: 'error' },
                4: { text: '待回收', tagType: 'warning' },
                5: { text: '待处理', tagType: 'warning' },
                6: { text: '已作废', tagType: 'info' },
            };
        },
        // 追踪器状态常量 <<<<<
    },

    watch: {
        queryTrackerStatus: 'query',
    },

    methods: {
        // 处理对话框打开
        handleDialogOpen() {
            this.visible = true;
        },

        // 处理对话框关闭
        handleDialogClosed() {
            // this.trackersId = [''];
            this.trackersId = '';
        },

        // 添加传感器
        addTracker(index) {
            // 索引是0则添加否则移除当前索引
            index ? this.trackersId.splice(index, 1) : this.trackersId.push('');
        },

        // 保存入库
        save() {
            // 所传传感器id必须全部符合格式
            // if (
            //     this.trackersId.every((id, index) => {
            //         return /^8\d{14},?\b$/.test(id) || !this.$message.error(`传感器${index + 1}格式不正确`);
            //     })
            // ) {
            //     this.$put('/yxl/platform/saveTracker', { vid: this.trackersId.toString() }).then(() => {
            //         this.query();
            //         this.visible = false;
            //     });
            // }
            let vid = this.trackersId;
            if (vid.includes('\n') && vid.includes(',')) {
                this.$message.error('回车换行不需要带逗号');
                return;
            }
            if (/^(8\d{14},?)+\b$/.test((vid = vid.replace(/\n/g, ',')))) {
                this.$put('/yxl/platform/saveTracker', { vid }).then(() => {
                    this.query();
                    this.visible = false;
                });
            } else {
                this.$message.error('传感器vid格式不正确');
            }
        },
    },
};
</script>